<template>
  <view class="multiplePicker">
    <view class="multiplePicker-file">
      <view class="multiplePicker-file-choose">
        <view v-for="(item,index) in paramsList" class="multiplePicker-file-choose-item">
          {{ item.text }}
          <van-icon class="multiplePicker-file-choose-icon" @click="onDelete(index)" name="cross" />
        </view>
      </view>
      <view class="multiplePicker-file-button" @click="showPopup"><van-icon name="plus" />{{ buttonLabel || '点击选择' }}</view>
    </view>
    <van-popup v-model:show="show" position="bottom">
      <view class="multiplePicker-toolbar">
        <view @click="onCancel" class="multiplePicker-toolbar-cancel">取消</view>
        <view @click="onConfirm" class="multiplePicker-toolbar-confirm">确认</view>
      </view>
      <van-search v-model="searchValue" @search="onSearch" placeholder="请输入搜索关键词" />
      <view class="multiplePicker-content">
        <van-checkbox-group class="multiplePicker-checkbox" v-model="checked">
          <van-cell-group inset>
            <van-cell
              v-for="(item, index) in inList"
              clickable
              :key="item.value"
              :title="`${item.text}`"
              @click="toggle(index)"
            >
              <template #right-icon>
                <van-checkbox
                  :name="item"
                  :ref="el => checkboxRefs[index] = el"
                  @click.stop
                />
              </template>
            </van-cell>
          </van-cell-group>
        </van-checkbox-group>
      </view>
    </van-popup>
  </view>
</template>

<script setup>
import { ref, onBeforeUpdate } from 'vue';

const props = defineProps({
  buttonLabel: String,
  columns: Array,
})
const emit = defineEmits(['onCancel', 'onConfirm']);

const show = ref(false);
const searchValue = ref('');
const checked = ref([]); // 已选择选择列表
const checkboxRefs = ref([]); // 多选框状态列表
const inList = ref([]); // 可选择列表
const paramsList = ref([])


const showPopup = () => {
  show.value = true;
};

const onSearch = (val) => {
  inList.value = props.columns.filter(e => {
    if (e.text.match(val)) {
      return e
    }
  })
};
const toggle = (index) => {
  checkboxRefs.value[index].toggle();
};
const onDelete = (index) => {
  paramsList.value.splice(index, 1);
  checked.value = [...paramsList.value];
};

const onCancel = () => {
  initPicker();
  emit('cancel')
  show.value = false;
};
const onConfirm = () => {
  paramsList.value = [...checked.value];
  emit('confirm',checked.value);
  show.value = false;
};

const initPicker = () => {
  searchValue.value = '';
  inList.value = [...props.columns];
};

onBeforeUpdate(() => {
  inList.value = [...props.columns];
})
</script>

<style lang="scss" scoped>
.multiplePicker {
  &-file {
    font-size: 24rpx;
    color: #646566;
    line-height: 30rpx;
    &-choose {
      display: flex;
      flex-wrap: wrap;
      gap: 10rpx;
      &-item  {
        height: 30rpx;
        padding: 0 10rpx;
        border: 1px solid #ddd;
        border-radius: 8rpx;
        background-color: #fff;
      }
    }
    &-button {
      margin-top: 10rpx;
      color: #1989fa;
    }
  }
  &-toolbar {
    padding: 0 32rpx;
    height: 80rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 24rpx;
    &-cancel {
      color: #969799;
    }
    &-confirm {
      color: #1989fa;
    }
  }
  &-content {
    padding-bottom: 30rpx;
  }
  &-checkbox {
    height: 500rpx;
    padding: 0 32rpx 0;
    font-size: 24rpx;
    overflow-y: scroll;
  }
}
</style>